/**
 *
 * @param values y周数值
 * @param labels x周标签
 * @param options 需要提供elementId, title, unit
 * @constructor
 */
let InfoCard = function (values, labels, options) {
    this.values = JSON.parse(JSON.stringify(values));
    this.labels = JSON.parse(JSON.stringify(labels));
    const defaultOptions = {
        name: '', // 名称
        unit: '', // 单位
        labels: this.labels,
        values: this.values,
        count: 10,
        type: 'line',
        width: '100%',
        height: '100%',
        tension: 0.5,
        left: 0,
        leftText: {
            fontSize: 12,
            fontColor: '#fff',
            space: 0, // 上方和下方的空隙
        },
        lineColor: '#3072fa',
        fillColor: 'transparent',
        lineWidth: 3,
        spotColor: '#fff',
        minSpotColor: 'transparent',
        maxSpotColor: 'transparent',
        highlightLineColor: '#fff',
        axisColor: 'rgba(255,255,255,.2)',
        spotRadius: 4,
        chartRangeMin: 0,
        chartRangeMax: 40,
        tooltipChartTitle: 'Temp: ',
        tooltipFormatter: (sparkline, options, fields) => {
            let i
            if (options.userOptions.type === 'line') {
                i = fields.x
            } else if (options.userOptions.type === 'bar') {
                i = fields[0].offset
            }
            if (i !== 'undefined') return this.labels[i] + ' - ' + this.values[i] + this.options.unit;
        }
    }
    this.options = $.extend({}, defaultOptions, options)
    if (!this.options.elementId) this.options.elementId = 'info-card-' + new Date().getTime();

    if (this.options.min !== "undefined") this.options.chartRangeMin = this.options.min;
    if (this.options.max !== "undefined") this.options.chartRangeMax = this.options.max;
}

InfoCard.prototype.init = function () {
    let delta = this.values[this.values.length - 1] - this.values[this.values.length - 2]
    if (isNaN(delta)) {
        delta = 0;
    } else {
        delta = delta.toFixed(1);
    }
    let fa = ''
    if (delta > 0) fa = 'fa-level-up'
    if (delta < 0) fa = 'fa-level-down'
    $('#' + this.options.parentId).html(`
        <div class="info-card" id="${this.options.elementId}">
            <img class="icon" src="${this.options.icon}" alt="">
            <div class="title">${this.options.name}</div>
            <div class="value">
                <span class="current">${this.values[this.values.length - 1] || 0}</span>${this.options.unit}
                <span class="delta delta-up">${delta > 0 ? '+' : ''}${delta}<i class="fa ${fa}"></i></span>
            </div>
            <div class="chart"></div>
        </div>
    `)
    $('#' + this.options.elementId + '>.title').html(this.options.name);
    this.render();
    return this;
};

InfoCard.prototype.render = function () {
    $('#' + this.options.elementId + '>.chart').sparkline(this.values, this.options);
}

InfoCard.prototype.update = function (value, label) {
    this.values.push(value);
    this.labels.push(label);
    if (this.values.length > this.options.count) this.values.shift();
    if (this.labels.length > this.options.count) this.labels.shift();

    $('#' + this.options.elementId + '>.value>.current').html(value)
    if (this.values.length >= 2) {
        let delta = this.values[this.values.length - 1] - this.values[this.values.length - 2]
        if (isNaN(delta)) {
            delta = 0;
        } else {
            delta = delta.toFixed(1);
        }
        const deltaDiv = $('#' + this.options.elementId + '>.value>.delta');
        if (delta > 0) {
            deltaDiv.html('+' + delta + '<i class="fa fa-level-up"></i>')
            deltaDiv.attr('class', 'delta delta-up')
        } else if (delta < 0) {
            deltaDiv.html(delta + '<i class="fa fa-level-down"></i>')
            deltaDiv.attr('class', 'delta delta-down')
        } else {
            deltaDiv.html('')
            deltaDiv.attr('class', 'delta')
        }
    }

    this.render();
}
